<!--*******************************************************************
* ActiveGrade Mobile
* Written by Sean Hickey for ActiveGrade, LLC
* 2011
********************************************************************-->
<!DOCTYPE html>
<html>
<head>
	<title>ActiveGrade Mobile</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="jquery.mobile-1.0b2.min.css" />
	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.0b2.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>
	<script type="text/javascript" src="ag-mobile.js"></script>
	<script type="text/javascript">
	
		$('#main').live('pagecreate', function(event) {
			$('#login').submit( function(event) {
				trylogin();
				return false;
			});
		});
		
		function trylogin() {
			$('#login').validate({
				onsubmit: false,
				rules: {
					email: {
						required: true,
					},
					pass: {
						required: true,
					},
				},
			});
			if($('#login').valid()) {
				$.mobile.loadingMessage = "logging in";
				$.mobile.showPageLoadingMsg();
				$('.loginelm').attr('disabled','disabled');
		
				login(getRoot(), $('#email').val(), $('#pass').val(), function(data) {
					if(data[0] == null) {
						$.mobile.hidePageLoadingMsg();
						alert("Sorry, that login didn't work. Please check your email address and password and try again.");
						$('.loginelm').removeAttr('disabled');
						$.mobile.hidePageLoadingMsg();
						$.mobile.loadingMessage = "loading"
					}
					else {
						$('.loginelm').removeAttr('disabled');
						var userID = data[0].id;
						document.cookie = 'userID=' + userID + ';';
						document.cookie = 'pwd=' + $('#pass').val() + ';';
						$.mobile.hidePageLoadingMsg();
						$.mobile.loadingMessage = "loading"
						window.location.href='main.html';
					}
				},
				function (jqXHR, textStatus, errorThrown) {
					alert("Unable to connect. Make sure your internet connection is active");
					$('.loginelm').removeAttr('disabled');
					$.mobile.hidePageLoadingMsg();
					$.mobile.loadingMessage = "loading"
				});
			}
		}
	</script>
	<!-- Styling for validation errors -->
	<style type="text/css">
		label.error {
			margin: auto;
			color: red;
			display: block;
			width: 60%;
			text-align: right;
		}
	</style>
</head>
<body>
	<!-- MAIN LOGIN PAGE -->
	<div data-role="page" id="main">
		<div data-role="header">
			<h1>ActiveGrade Mobile</h1>
		</div>
		<div data-role="content">
			<form id="login">
				<div data-role="fieldcontain">
					<label for="email">Email Address:</label>
					<input type="text" name="email" id="email" value="" class="loginelm" />
				</div>
				<div data-role="fieldcontain">
					<label for="pass">Password:</label>
					<input type="password" name="pass" id="pass" value="" class="loginelm" />
				</div>
				<input type="submit" value="Login" class="loginelm" />
			</form>
		</div>
	</div>
</body>
</html>